import React, {useEffect, useState} from 'react'
import './App.scss'
import axios from 'axios'
import {HashRouter, Route, Routes} from "react-router-dom";
import Home from "./pages/Home/index.jsx";
import Bank from "./pages/Bank/index.jsx";

function App() {
  const [arr, setArr] = useState([])

  useEffect(() => {
    (async () => {
      let res = await axios({
        url: "data.txt"
      })

      console.log(res.data);
      // let arr = res.data.split(' ')

      let arr = (await axios({
        method: "post",
        url: "/api/nodejieba/cut",
        data: {
          content: res.data
        }
      })).data.data
      let size = arr.length
      let percentHidden = 0.1

      setArr(arr.map(x => {
        let isHidden = Math.random() < percentHidden
        return {
          isHidden,
          val: isHidden ? '____' : x,
          ans: x,
          error: '',
          color: 'green'
        }
      }))
    })()

  }, [])

  function createAndPlayVideo() {
    // 创建视频元素
    const video = document.createElement('video');

    // 设置视频属性
    video.style.setProperty('display', 'none');
    video.width = 640;
    video.height = 360;
    video.controls = true;

    // 添加视频源
    const source = document.createElement('source');
    source.src = 'unbelievable.mp3'; // 替换为实际视频文件路径
    source.type = 'audio/mp3';
    video.appendChild(source);

    // 将视频元素添加到容器中
    const videoContainer = document.getElementById('videoContainer');
    videoContainer.innerHTML = ''; // 清空容器中的内容
    videoContainer.appendChild(video);

    // 播放视频
    video.play();
  }

  return (
      <HashRouter>
        <Routes>
          <Route exact path={'/'} element={<Bank/>}></Route>
          <Route exact path={'/'} element={<Home/>}></Route>
        </Routes>
      </HashRouter>
  )
}

export default App
